/*
  学习目标：了解-PropTypes增加校验
  步骤：
     1. 导包prop-types
     2. 给组件设置规则对象
     3. 给props属性, 增加校验规则
*/

import React, { Component } from 'react';
// 1. 导包prop-types
import PropTypes from 'prop-types';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          obj={{}}
          person={{ name: 'zs', age: 18 }}
          title={<h1>hello React</h1>}
          msg="123"
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}

// 2. 给组件设置规则对象
Child.propTypes = {
  // 3. 给props属性, 增加校验规则
  msg: PropTypes.string.isRequired,

  // element: jsx
  title: PropTypes.element,

  obj: PropTypes.object,
  // shape
  person: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
};
//
